<template>
  <div>
    <el-dialog v-model="store.show" title="笔记信息填写" width="30%" destroy-on-close center close-on-click-modal>
      <div :model="inputNote">
        <el-input v-model="inputNote.title" placeholder="笔记标题" />
        <!-- 更换成上传图片 -->
        <el-input v-model="inputNote.img" placeholder="笔记封面url" style="margin-top: 5%"/>
      </div>
      <!--   卡片底部   -->
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="saveNote">保存</el-button>
        <el-button type="primary" @click="close">取消</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import {getNoteImgAndNoteTitle} from "@/api";
import {ElMessage} from "element-plus";
import {NoteInputCardStore} from "@/stores/counter";

// 创建一个响应式对象 -> 初始化标题和图片
let inputNote = reactive({title: '', img: ''})
// 建立卡片显示机制
let store = NoteInputCardStore()
// 进行保存
function API() {
  let notetitle = inputNote.title;let noteimg = inputNote.img;const noteUtilDTO = {notetitle, noteimg};
  console.log(noteUtilDTO)
  getNoteImgAndNoteTitle(noteUtilDTO).then((res) => {console.log(res.data)})
}
// 清除填写内容
function close() {inputNote.title = "";inputNote.img = "";store.show = false;}
function saveNote() {
  if (inputNote.title === "" || inputNote.img === "") {ElMessage({message: "不填写为默认哦！"});API();close()}
  else {API();close()}
}

</script>

<style scoped>

</style>
